<template>
  <footer class="footer">
    <div class="container">
      <div class="footer-content">
        <div class="footer-section">
          <div class="footer-brand">
            <img
              v-if="footerInfo.footerLogo"
              :src="footerInfo.footerLogo"
              alt="logo"
              class="footer-logo"
            />
            <div class="footer-info">
              <h3>
                {{ footerInfo.siteName }}
              </h3>
              <p v-html="footerInfo.siteDescription"></p>
              <!-- {{ footerInfo.siteDescription }} -->
            </div>
          </div>
          <div class="social-links"></div>
        </div>

        <div class="nav-box" style="flex: 2">
          <div class="footer-section">
            <h4>快速链接</h4>
            <ul class="footer-links">
              <li v-for="link in quickLinks" :key="link.id">
                <router-link :to="link.settingValue">{{
                  link.description
                }}</router-link>
              </li>
            </ul>
          </div>

          <div class="footer-section">
            <h4>展会信息</h4>
            <ul class="footer-links">
              <li v-for="link in exhibitionLinks" :key="link.id">
                <router-link :to="link.settingValue">{{
                  link.description
                }}</router-link>
              </li>
            </ul>
          </div>
        </div>

        <div class="footer-section">
          <h4>联系我们</h4>
          <div class="contact-info">
            <p v-if="contact.company">{{ contact.company }}</p>
            <p v-if="contact.phone">
              <span class="contact-icon iconfont icon-dianhua"></span>
              <span>{{ contact.phone }}</span>
            </p>
            <p v-if="contact.email">
              <span class="contact-icon iconfont icon-youxiang"></span>
              <span>{{ contact.email }}</span>
            </p>
            <p v-if="contact.address">
              <span class="contact-icon iconfont icon-dizhi"></span>
              <span>{{ contact.address }}</span>
            </p>
          </div>
        </div>
      </div>

      <div class="footer-bottom">
        <div class="footer-bottom-content">
          <p>
            {{ contact.siteKeywords }}
            <template v-if="recordLinks && recordLinks.length">
              <span v-for="(rec, idx) in recordLinks" :key="rec.key || idx">
                <span v-if="idx === 0"> | </span>
                <span v-else> | </span>
                <a
                  :href="rec.url"
                  rel="noopener"
                  style="color: #fff; text-decoration: none"
                  >{{ rec.text || rec.url }}</a
                >
              </span>
            </template>
          </p>
          <div class="footer-bottom-links">
            <router-link to="/sys-privacy?type=footerPrivacy">
              隐私政策
            </router-link>
            <router-link to="/sys-privacy?type=footerTerms">
              服务条款
            </router-link>
            <!-- <a href="#" @click.prevent="openPrivacy('footerPrivacy')"> </a>
            <a href="#" @click.prevent="openPrivacy('footerTerms')">服务条款</a> -->
          </div>
        </div>
      </div>
    </div>
  </footer>
</template>

<script>
import {
  ChatDotRound,
  Message,
  Phone,
  Location,
  Clock,
} from "@element-plus/icons-vue";
import request from "@/utils/request";
import "@/assets/icons/iconfont.css";
import { useRouter } from "vue-router";

export default {
  name: "Footer",
  components: {
    ChatDotRound,
    Message,
    Phone,
    Location,
    Clock,
  },
  data() {
    return {
      site: {
        siteName: "",
        siteDescription: "",
        siteLogo: "",
      },
      footerInfo: {
        siteName: "",
        siteDescription: "",
        footerLogo: "",
      },
      contact: {
        company: "",
        email: "",
        phone: "",
        address: "",
        workTime: "",
      },
      quickLinks: [],
      exhibitionLinks: [],
      privacyLink: "",
      termsLink: "",
      recordLinks: [],
    };
  },
  async mounted() {
    try {
      // 获取页脚基本信息设置
      const footerInfoResponse = await request.get("/site/footer-info");
      if (
        footerInfoResponse &&
        (footerInfoResponse.code === "200" || footerInfoResponse.code === 200)
      ) {
        this.footerInfo = Object.assign(this.footerInfo, {
          siteName: footerInfoResponse.data?.siteName || "",
          siteDescription: footerInfoResponse.data?.siteDescription || "",
          footerLogo: footerInfoResponse.data?.footerLogo || "",
        });
      }

      // 获取网站基本信息
      const info = await request.get("/site/info");
      if (info && (info.code === "200" || info.code === 200)) {
        this.site = Object.assign(this.site, {
          siteName: info.data?.siteName || "",
          siteDescription: info.data?.siteDescription || "",
          siteLogo: info.data?.siteLogo || "",
        });
        this.contact = Object.assign(this.contact, info.data || {});
      } else {
        // 兼容旧接口，仅联系信息
        const data = await request.get("/site/contact");
        if (data && (data.code === "200" || data.code === 200)) {
          this.contact = Object.assign(this.contact, data.data || {});
        }
      }

      // 获取页脚链接配置
      const linksResponse = await request.get("/site/footer-links");
      if (
        linksResponse &&
        (linksResponse.code === "200" || linksResponse.code === 200)
      ) {
        this.quickLinks = linksResponse.data?.quickLinks || [];
        this.exhibitionLinks = linksResponse.data?.exhibitionLinks || [];
      } else {
        // 使用默认链接
        this.loadDefaultLinks();
      }

      // 获取法律文档跳转链接（public）
      const privacyResp = await request.get("/site/privacy-policy");
      if (
        privacyResp &&
        (privacyResp.code === "200" || privacyResp.code === 200)
      ) {
        this.privacyLink = privacyResp.data?.content || "";
      }
      const termsResp = await request.get("/site/terms-of-service");
      if (termsResp && (termsResp.code === "200" || termsResp.code === 200)) {
        this.termsLink = termsResp.data?.content || "";
      }

      // 获取备案链接（public）
      try {
        const recordResp = await request.get("/site/record-links");
        if (
          recordResp &&
          (recordResp.code === "200" || recordResp.code === 200)
        ) {
          // 预期为数组 [{text,url,key}]，若为字符串则尝试解析
          const raw = recordResp.data;
          if (Array.isArray(raw)) {
            this.recordLinks = raw;
          } else if (typeof raw === "string") {
            try {
              this.recordLinks = JSON.parse(raw);
            } catch {
              this.recordLinks = [];
            }
          } else {
            this.recordLinks = [];
          }
        }
      } catch (e) {
        // 无备案接口则忽略
      }
    } catch (e) {
      // 静默失败，使用默认数据
      this.loadDefaultLinks();
    }
  },
  methods: {
    openPrivacy(type) {
      const router = useRouter();
      router.push({
        path: "/sys-privacy",
        query: {
          type,
        },
      });
    },
    openTerms() {
      const url = (this.termsLink || "").trim();
      if (url) {
        window.location.href = url;
      } else {
        window.location.href = "/terms-of-service";
      }
    },
    loadDefaultLinks() {
      // 默认快速链接
      this.quickLinks = [
        { id: 1, settingValue: "/", description: "首页" },
        { id: 2, settingValue: "/about", description: "关于我们" },
        { id: 3, settingValue: "/exhibitors", description: "展商中心" },
        { id: 4, settingValue: "/visitors", description: "观众中心" },
        { id: 5, settingValue: "/activities", description: "同期活动" },
        { id: 6, settingValue: "/media-center", description: "新闻媒体" },
        { id: 7, settingValue: "/contact", description: "联系我们" },
      ];

      // 默认展会信息链接
      this.exhibitionLinks = [
        { id: 1, settingValue: "/exhibition-intro", description: "展会介绍" },
        {
          id: 2,
          settingValue: "/exhibit-registration",
          description: "参展报名",
        },
        {
          id: 3,
          settingValue: "/visitor-preregistration",
          description: "观众预登记",
        },
        { id: 4, settingValue: "/venue-intro", description: "展馆介绍" },
        { id: 5, settingValue: "/product-scope", description: "展品范围" },
        {
          id: 6,
          settingValue: "/exhibition-highlights",
          description: "展会集锦",
        },
      ];
    },
  },
};
</script>

<style scoped>
.footer {
  /* background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); */
  background: linear-gradient(
    189deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 82%
  );
  color: white;
  padding: 60px 0 20px;
  margin-top: auto;
  /* position: relative; */
}

/* .footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #320063 0%, #4a0a8a 50%, #320063 100%);
} */

.footer-content {
  display: flex;
  /* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
  gap: 40px;
  margin-bottom: 40px;
  position: relative;
}

.footer-content::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 2px;
}
.footer-section {
  flex: 1;
}

.footer-section h3 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
}

.footer-section h3::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #320063 0%, #4a0a8a 100%);
}

.footer-section h4 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
}

.footer-section h4::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #320063 0%, #4a0a8a 100%);
}

.footer-section p {
  line-height: 1.6;
  color: #e8e8e8;
  margin-bottom: 20px;
  font-size: 15px;
}

.nav-box {
  display: flex;
  gap: 40px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}

.footer-logo {
  width: auto;
  max-width: 280px;
  height: 80px;
  object-fit: contain;
  border-radius: 4px;
  background: transparent;
}

.footer-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.footer-info h3 {
  font-size: 24px;
  margin: 0;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.2;
}

.footer-info p {
  margin: 0;
  line-height: 1.6;
  color: #e8e8e8;
  font-size: 15px;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-link:hover {
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(50, 0, 99, 0.4);
  border-color: #320063;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  color: var(--e-global-color-text);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 15px;
  position: relative;
}

.footer-links a:hover {
  color: #fff;
  transform: translateX(5px);
}

.contact-info {
  color: #e8e8e8;
}

.contact-info p {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.6;
}

.contact-icon {
  margin-right: 8px;
  font-size: 16px;
  color: #ffffff;
  opacity: 0.9;
}

.footer-links a::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  transition: width 0.3s ease;
}

.footer-links a:hover::before {
  width: 10px;
}

.contact-info p {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
  color: var(--e-global-color-text);
  font-size: 15px;
  transition: all 0.3s ease;
}

.contact-info p:hover {
  color: #fff;
  transform: translateX(3px);
}

.contact-info .contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #ffffff;
  flex-shrink: 0;
  margin-right: 8px;
  width: auto;
  height: auto;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 25px;
  margin-top: 20px;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-bottom p {
  color: #b8b8b8;
  margin: 0;
  font-size: 14px;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  color: var(--e-global-color-text);
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 14px;
  position: relative;
}

.footer-bottom-links a:hover {
  color: #fff;
}

.footer-bottom-links a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  transition: width 0.3s ease;
}

.footer-bottom-links a:hover::after {
  width: 100%;
}

@media (max-width: 768px) {
  .footer {
    padding: 40px 0 20px;
  }

  .footer-content {
    /* grid-template-columns: 1fr; */
    flex-direction: column;
    gap: 30px;
  }

  .footer-section h3 {
    font-size: 20px;
  }

  .footer-section h4 {
    font-size: 16px;
  }

  .footer-section p {
    font-size: 14px;
  }

  .footer-links a {
    font-size: 14px;
  }

  .contact-info p {
    font-size: 14px;
  }

  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }

  .social-link {
    width: 38px;
    height: 38px;
  }

  .footer-brand {
    align-items: center;
    gap: 10px;
  }

  .footer-logo {
    max-width: 200px;
    height: 65px;
  }

  .footer-info {
    text-align: center;
  }

  .footer-info h3 {
    font-size: 20px;
  }

  .footer-info p {
    font-size: 14px;
  }
}
</style>
